<template>
  <div class="dataVisual-body">
    <div class="wpbox">
      <el-row :gutter="10" style="height: 9%;" class="top_header">
        <el-col :span="8" @mouseover.native="backBtnShow = true" @mouseout.native="backBtnShow = false" style="height: 100%">
          <ul style="padding-top: 38px; padding-left: 10%; width: 100%;">
            <li><a v-show="backBtnShow" href="/index">系统管理</a></li>
          </ul>
        </el-col>
        <el-col :span="8" style="text-align: center; padding-top: 16px; font-weight: bold; letter-spacing: 8px; font-size: 18px;">
          <h1>海岛环境安全监测数据分析</h1>
        </el-col>
        <el-col :span="8" style="padding-top: 2%; padding-right: 2.5%; text-align: right;">
          <span class="trbtn"><a href="#" @click="touchFullScreen">{{ fullscreen }}</a></span>
          <span :class="noticeType == 'voice' ? 'btn_active' : 'trbtn'"><a href="#" @click="noticeTypeChange('voice')">语音播报</a></span>
          <span :class="noticeType == 'notify' ? 'btn_active' : 'trbtn'"><a href="#" @click="noticeTypeChange('notify')">报警提醒</a></span>
          <span :class="noticeType == 'silence' ? 'btn_active' : 'trbtn'"><a href="#" @click="noticeTypeChange('silence')">报警静音</a></span>
        </el-col>
      </el-row>
      <el-row :gutter="5" style="width: 96%; height: 100%; margin-left: 2%;">
        <el-col :span="6" style="height: 100%">
          <div class="aleftboxttop">
            <h2 class="tith2">设备报警事件统计</h2>
            <div class="lefttoday_tit" style=" height:8%">
              <p class="fr">时间段：{{ beidouEventThisYearStatistics.thisMonth }}</p>
            </div>
            <div class="lefttoday_number">
              <div class="widget-inline-box text-center fl">
                <p>总报警数</p>
                <h3 class="ceeb1fd">{{ beidouEventThisYearStatistics.monthIi + beidouEventThisYearStatistics.monthPosition + beidouEventThisYearStatistics.monthAngle }}</h3>
                <h4 class="text-muted pt6">
                  环比
                  <span v-show="beidouEventThisYearStatistics.monthIi + beidouEventThisYearStatistics.monthPosition + beidouEventThisYearStatistics.monthAngle > 0">
                    <img v-show="beidouEventThisYearStatistics.monthIi + beidouEventThisYearStatistics.monthPosition + beidouEventThisYearStatistics.monthAngle > beidouEventThisYearStatistics.lastMonthIi + beidouEventThisYearStatistics.lastMonthPosition + beidouEventThisYearStatistics.lastMonthAngle" src="@/assets/images/visual/dataVisual/iconup.png" height="16" />
                    <img v-show="beidouEventThisYearStatistics.monthIi + beidouEventThisYearStatistics.monthPosition + beidouEventThisYearStatistics.monthAngle < beidouEventThisYearStatistics.lastMonthIi + beidouEventThisYearStatistics.lastMonthPosition + beidouEventThisYearStatistics.lastMonthAngle" src="@/assets/images/visual/dataVisual/icondown.png" height="16" />
                  </span>
                  {{ beidouEventThisYearStatistics.lastMonthIi + beidouEventThisYearStatistics.lastMonthPosition + beidouEventThisYearStatistics.lastMonthAngle == 0 ? '-' : (Math.abs(100 - (100*(beidouEventThisYearStatistics.monthIi + beidouEventThisYearStatistics.monthPosition + beidouEventThisYearStatistics.monthAngle)/(beidouEventThisYearStatistics.lastMonthIi + beidouEventThisYearStatistics.lastMonthPosition + beidouEventThisYearStatistics.lastMonthAngle)))).toFixed(2) + '%' }}
                </h4>
              </div>
              <div class="widget-inline-box text-center fl">
                <p>震动报警</p>
                <h3 class="c24c9ff">{{ beidouEventThisYearStatistics.monthIi }}</h3>
                <h4 class="text-muted pt6">
                  环比
                  <span v-show="beidouEventThisYearStatistics.lastMonthIi > 0">
                    <img v-show="beidouEventThisYearStatistics.monthIi > beidouEventThisYearStatistics.lastMonthIi" src="@/assets/images/visual/dataVisual/iconup.png" height="16" />
                    <img v-show="beidouEventThisYearStatistics.monthIi < beidouEventThisYearStatistics.lastMonthIi" src="@/assets/images/visual/dataVisual/icondown.png" height="16" />
                  </span>
                  {{ beidouEventThisYearStatistics.lastMonthIi == 0 ? '-' : (Math.abs(100 - 100*beidouEventThisYearStatistics.monthIi/beidouEventThisYearStatistics.lastMonthIi)).toFixed(2) + '%' }}
                </h4>
              </div>
              <div class="widget-inline-box text-center fl">
                <p>位移报警</p>
                <h3 class="cffff00">{{ beidouEventThisYearStatistics.monthPosition }}</h3>
                <h4 class="text-muted pt6">
                  环比
                  <span v-show="beidouEventThisYearStatistics.lastMonthPosition > 0">
                    <img v-show="beidouEventThisYearStatistics.monthPosition > beidouEventThisYearStatistics.lastMonthPosition" src="@/assets/images/visual/dataVisual/iconup.png" height="16" />
                    <img v-show="beidouEventThisYearStatistics.monthPosition < beidouEventThisYearStatistics.lastMonthPosition" src="@/assets/images/visual/dataVisual/icondown.png" height="16" />
                  </span>
                  {{ beidouEventThisYearStatistics.lastMonthPosition == 0 ? '-' : (Math.abs(100 - 100*beidouEventThisYearStatistics.monthPosition/beidouEventThisYearStatistics.lastMonthPosition)).toFixed(2) + '%' }}
                </h4>
              </div>
              <div class="widget-inline-box text-center fl">
                <p>倾斜报警</p>
                <h3 class="c11e2dd">{{ beidouEventThisYearStatistics.monthAngle }}</h3>
                <h4 class="text-muted pt6">
                  环比
                  <span v-show="beidouEventThisYearStatistics.lastMonthAngle > 0">
                    <img v-show="beidouEventThisYearStatistics.monthAngle > beidouEventThisYearStatistics.lastMonthAngle" src="@/assets/images/visual/dataVisual/iconup.png" height="16" />
                    <img v-show="beidouEventThisYearStatistics.monthAngle < beidouEventThisYearStatistics.lastMonthAngle" src="@/assets/images/visual/dataVisual/icondown.png" height="16" />
                  </span>
                  {{ beidouEventThisYearStatistics.lastMonthAngle == 0 ? '-' : (Math.abs(100 - 100*beidouEventThisYearStatistics.monthAngle/beidouEventThisYearStatistics.lastMonthAngle)).toFixed(2) + '%' }}
                </h4>
              </div>
            </div>
            <!-- lefttoday_number end -->
          </div>
          <div class="aleftboxtmidd">
            <h2 class="tith2">设备情况统计</h2>
            <!--            <div class="lefttoday_tit height ht">-->
            <!--              <p class="fl">地区：银滩花园</p>-->
            <!--              <p class="fr">时间段：2020-06月</p>-->
            <!--            </div>-->
            <div id="aleftboxtmidd" class="aleftboxtmiddcont"></div>
          </div>
          <div class="aleftboxtbott">
            <h2 class="tith2">近两月事件对比分析</h2>
            <!--<div class="lefttoday_tit height">
              <p class="fl">地区：银滩花园</p>
              <p class="fr">时间段：{{ beidouEventThisYearStatistics.lastMonth }}至{{ beidouEventThisYearStatistics.thisMonth }}</p>
            </div>-->
            <div id="aleftboxtbott" class="aleftboxtbott_cont"></div>
          </div>
        </el-col>
        <el-col :span="12" style="height: 100%">
          <div style="height: 100%">
            <div class="amiddboxttop">
              <h2 class="tith2" style="padding-top: 1.3%; margin-top: 3%;">设备分布</h2>
              <div id="centerMap" class="amiddboxttop_map" style="">
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6" style="height: 100%">
          <div style="height: 100%">
            <div class="arightboxtop">
              <h2 class="tith2">最新报警</h2>
              <div class="lefttoday_tit">
                <!--                <p class="fl">地区：银滩花园</p>-->
                <p class="fr">时间段：{{ parseTime(now, '{y}-{m}-{d}') }}</p>
              </div>
              <div class="zhtc_table_title">
                <div style="flex: 1;">设备编号</div>
                <!-- 车牌 -->
                <div>报警时间</div>
                <!-- 进场时间 -->
                <div>报警值</div>
                <!-- 图片 -->
                <div>类型</div>
                <!-- 车辆类型 -->
              </div>
              <div id="zhtc_table" class="left2_table">
                <ul>
                  <li v-for="(item, i) in beidouRecentEventList" :class="i % 2 == 0 ? 'bg' : ''">
                    <div class="zhtc_table_li_content">
                      <div>
                        {{ item.clientNo }}
                      </div>
                      <div>
                        {{ parseTime(item.eventTime, '{y}-{m}-{d}') }}
                        <br>
                        {{ parseTime(item.eventTime, '{h}:{i}:{s}') }}
                      </div>
                      <div>{{ item.maxValue }}</div>
                      <div>{{ eventType[item.eventType] }}</div>
                    </div>
                  </li>
                </ul>
              </div>

            </div>
            <div class="arightboxbott">
              <h2 class="tith2 ">30日事件趋势</h2>
              <div class="lefttoday_tit">
                <!--                <p class="fl">地区：银滩花园</p>-->
                <p class="fr">时间段：{{ beidouThirtyDaysTrendData.days[0] }} 至 {{ beidouThirtyDaysTrendData.days[beidouThirtyDaysTrendData.days.length-1] }}</p>
              </div>
              <div id="arightboxbott" class="arightboxbottcont"></div>
            </div>
          </div>
        </el-col>
      </el-row>

      <el-dialog :title="alertTitle" :visible.sync="alertDialogVisible" :modal="false" custom-class="alert_dialog" style="margin-top: 16vh; color: #FFFFFF"  width="30%" center>
        <div style="height: 25vh; text-align: center;">
          <div style="width: 100%; height: 50%; text-align: center;">
            <div :class="alertDivClass" style="position: relative; top: 0%;"></div>
            <div style="z-index: 999; position: absolute; top: 30%; font-size: 2vw; width: 90%; text-align: center;">
              {{ currentAlertData.maxValue ? parseFloat(currentAlertData.maxValue).toFixed(1) : '' }}
              <br>
              {{ currentAlertData.eventType == 'position' ? 'mm' : '°' }}
            </div>
          </div>
          <el-descriptions :column="2" title="报警信息" style="background: #ffffff00; color: #FFFFFF">
            <el-descriptions-item label="设备编号">{{ currentAlertData.clientNo }}</el-descriptions-item>
            <el-descriptions-item label="设备名称">{{ currentAlertData.client ? currentAlertData.client.clientName : '' }}</el-descriptions-item>
            <el-descriptions-item label="管理人员">{{ currentAlertData.client ? currentAlertData.client.nickName : '' }}</el-descriptions-item>
            <el-descriptions-item label="报警时间">{{ parseTime(currentAlertData.eventTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</el-descriptions-item>
            <el-descriptions-item label="所在位置">{{ currentAlertData.client ? currentAlertData.client.address : '' }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="alertDialogVisible = false">取 消</el-button>
          <el-button @click="alertDialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>

    <div hidden="hidden">
      <button class="butt" @click="auditPlay"></button>
      <audio ref="audio" class="aud">
        <source src="@/assets/audio/quake_alert.mp3" />
      </audio>
    </div>
  </div>
</template>

<style>
.el-descriptions__body{
  background: #FFFFFF00;
  color: #FFFFFF;
}
</style>

<script>
import '@/assets/styles/visual/dataVisual.css'
import echarts from 'echarts'
import { beidouDataVisual, beidouThirtyDaysEventTrend } from "@/api/device/beidouStatistics";
import { heart } from "@/api/common";
import screenfull from "screenfull";

export default {
  name: "BeidouStatistics",
  data() {
    return {
      backBtnShow: false,
      alertDivClass: 'alert_img alert_img_Ii',
      alertTitle: "报警",
      alertDialogVisible: false,
      currentAlertData: {},
      noticeType: 'voice',
      now: new Date(),
      eventType: {
        'Ii': '震动',
        'position': '位移',
        'angle': '倾斜'
      },
      onlineIcon: require('@/assets/images/visual/dataVisual/device-online.png'),
      offlineIcon: require('@/assets/images/visual/dataVisual/device-offline.png'),
      dormancyIcon: require('@/assets/images/visual/dataVisual/device-dormancy.png'),
      mapChart: null,
      mapChartOption: null,
      map: null,
      clientMarkerMap: null,
      baiduMapInfoWindow: null,
      beidouClientList: [],
      beidouClientStat: {
        onlineCount: 0,
        offlineCount: 0,
        dormancy: 0,
      },
      beidouRecentEventList: [],
      beidouEventThisYearStatistics: {
        thisMonth: '####年##月',
        lastMonth: '####年##月',
        todayPosition: 0,
        todayAngle: 0,
        todayIi: 0,
        monthPosition: 0,
        monthIi: 0,
        monthAngle: 0,
        lastMonthPosition: 0,
        lastMonthIi: 0,
        lastMonthAngle: 0,
        yearPosition: 0,
        yearAngle: 0,
        yearIi: 0,
        totalPosition: 0,
        totalAngle: 0,
        totalIi: 0
      },
      beidouEventStat: {
        totalCount: 0,
        IiCount: 0,
        positionCount: 0,
        angleCount: 0
      },
      beidouThirtyDaysTrendData: {
        days: [],
        IiList: [],
        totalList: [],
        positionList: [],
        angleList: []
      },
      deviceStatisticsChart: null,
      recentTwoMonthStatChart: null,
      deviceStatisticsChartOption: null,
      recentTwoMonthStatChartOption: null,
      beidouThirtyDaysTrendChart: null,
      beidouThirtyDaysTrendChartOption: null,
      fullscreen: '全屏显示',
      geoJson: {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"adcode":460301,"name":"西沙区","center":[112.3386402,16.8310066],"childrenNum":0,"level":"district","acroutes":[100000,460000,460300],"parent":{"adcode":460300}},"geometry":{"type":"MultiPolygon","coordinates":[[[[111.463068,17.077698],[111.477772,17.088951],[111.502988,17.095669],[111.52348,17.103954],[111.536587,17.104794],[111.538251,17.094157],[111.52368,17.091974],[111.511305,17.085368],[111.501524,17.074338],[111.48203,17.077138],[111.482362,17.061068],[111.49374,17.058717],[111.513234,17.06538],[111.527273,17.073778],[111.550892,17.081953],[111.559142,17.087719],[111.563268,17.099587],[111.559409,17.1086],[111.541977,17.12002],[111.50871,17.116661],[111.49008,17.105857],[111.452023,17.093205],[111.449362,17.081113],[111.463068,17.077698]]],[[[117.70826,15.182581],[117.70846,15.142161],[117.712718,15.118301],[117.726823,15.105465],[117.787169,15.103599],[117.826823,15.106822],[117.827489,15.111742],[117.768939,15.122202],[117.737003,15.124916],[117.725226,15.131249],[117.722498,15.149228],[117.720769,15.195412],[117.726623,15.213272],[117.732146,15.218472],[117.744588,15.217737],[117.772798,15.178285],[117.784974,15.169014],[117.829285,15.153015],[117.839864,15.126499],[117.846052,15.139673],[117.839132,15.159291],[117.817109,15.170823],[117.792692,15.18015],[117.782711,15.187498],[117.766544,15.210785],[117.74858,15.229831],[117.736138,15.235539],[117.718906,15.228814],[117.71518,15.222654],[117.70826,15.182581]]],[[[111.734459,16.197323],[111.752556,16.19288],[111.779901,16.197492],[111.80046,16.208122],[111.816894,16.224151],[111.822017,16.238434],[111.813168,16.26177],[111.797932,16.272565],[111.782496,16.273746],[111.727473,16.261714],[111.70219,16.264525],[111.684226,16.262332],[111.684891,16.257047],[111.716495,16.248781],[111.749895,16.250468],[111.764333,16.255754],[111.784892,16.253111],[111.794007,16.243158],[111.793674,16.225725],[111.780899,16.214252],[111.764466,16.209135],[111.735457,16.207616],[111.734459,16.197323]]],[[[111.649495,16.255641],[111.612835,16.234329],[111.577838,16.208403],[111.569522,16.195467],[111.566195,16.171842],[111.568258,16.162786],[111.589748,16.153672],[111.611039,16.156316],[111.6469,16.175274],[111.656481,16.184105],[111.669988,16.190068],[111.690813,16.193217],[111.70066,16.198448],[111.696002,16.211103],[111.668191,16.206941],[111.65209,16.201204],[111.633594,16.184049],[111.623747,16.17938],[111.606648,16.177805],[111.59547,16.190236],[111.598863,16.198279],[111.626075,16.220608],[111.649495,16.236972],[111.663268,16.240121],[111.681698,16.254685],[111.681165,16.262164],[111.662736,16.255135],[111.649495,16.255641]]],[[[111.74038,16.548655],[111.740979,16.538492],[111.759276,16.523276],[111.764665,16.512214],[111.765796,16.495367],[111.759875,16.481888],[111.740314,16.468801],[111.739316,16.452905],[111.75209,16.455714],[111.766994,16.470261],[111.783095,16.496209],[111.788418,16.512719],[111.786688,16.520188],[111.759276,16.545679],[111.744439,16.551855],[111.74038,16.548655]]],[[[111.97438,16.323779],[111.995671,16.307028],[112.043508,16.312874],[112.056615,16.312986],[112.07611,16.323723],[112.082231,16.33873],[112.074912,16.34969],[112.047234,16.360368],[112.002923,16.350757],[111.982364,16.338393],[111.97438,16.323779]]],[[[112.232664,16.996329],[112.207913,16.986975],[112.200461,16.978685],[112.203123,16.967761],[112.222551,16.96059],[112.252957,16.966753],[112.293276,16.967817],[112.299065,16.973531],[112.287953,16.985015],[112.254953,16.997058],[112.232664,16.996329]]],[[[112.476577,16.00138],[112.569923,16.011119],[112.583763,16.014948],[112.598533,16.02418],[112.612172,16.039323],[112.61337,16.047991],[112.607648,16.066847],[112.588087,16.07073],[112.546304,16.063639],[112.527608,16.05801],[112.462205,16.044051],[112.452558,16.037916],[112.444707,16.02069],[112.448499,16.005264],[112.476577,16.00138]]],[[[112.340582,16.821266],[112.352158,16.829619],[112.361207,16.842177],[112.351027,16.845933],[112.346636,16.839878],[112.331001,16.838421],[112.33466,16.823677],[112.340582,16.821266]]],[[[112.409311,16.295279],[112.386024,16.285946],[112.379171,16.277513],[112.383562,16.265875],[112.41124,16.263569],[112.433662,16.27116],[112.447435,16.279593],[112.475845,16.28887],[112.531068,16.285721],[112.538786,16.289038],[112.536923,16.312424],[112.529138,16.31827],[112.452425,16.307196],[112.409311,16.295279]]],[[[112.348898,16.911844],[112.356616,16.914422],[112.360542,16.925349],[112.350162,16.944455],[112.333995,16.962551],[112.307448,16.973979],[112.302258,16.962999],[112.330934,16.935939],[112.340116,16.916271],[112.348898,16.911844]]],[[[111.495137,16.437289],[111.515829,16.438918],[111.537053,16.432345],[111.546035,16.434704],[111.550693,16.453467],[111.544904,16.460488],[111.533261,16.461218],[111.499994,16.451894],[111.495137,16.437289]]],[[[111.714965,16.443187],[111.721019,16.444872],[111.716561,16.453804],[111.699263,16.452624],[111.698398,16.446108],[111.714965,16.443187]]],[[[111.583693,16.490818],[111.576109,16.482955],[111.572782,16.463353],[111.578371,16.4474],[111.600393,16.438244],[111.614232,16.440322],[111.611638,16.463802],[111.592476,16.490761],[111.583693,16.490818]]],[[[111.69048,16.587559],[111.704785,16.573806],[111.724479,16.560276],[111.733062,16.564206],[111.727806,16.583293],[111.716961,16.594239],[111.696468,16.594519],[111.69048,16.587559]]],[[[112.507515,16.466049],[112.532398,16.491154],[112.55655,16.498736],[112.578906,16.513056],[112.586623,16.525578],[112.575313,16.537257],[112.519358,16.502779],[112.499597,16.493569],[112.495339,16.486044],[112.498865,16.469363],[112.507515,16.466049]]],[[[111.761738,16.061725],[111.756282,16.054633],[111.761006,16.041743],[111.776708,16.029753],[111.791345,16.028853],[111.80738,16.034932],[111.828471,16.049342],[111.832929,16.06195],[111.829602,16.071012],[111.81583,16.073094],[111.761738,16.061725]]],[[[111.628271,16.535404],[111.633727,16.545679],[111.62734,16.548037],[111.612636,16.544275],[111.601458,16.535853],[111.599861,16.528666],[111.615164,16.527206],[111.628271,16.535404]]],[[[114.703196,16.170324],[114.742384,16.184724],[114.792151,16.190461],[114.81617,16.198561],[114.815638,16.212453],[114.80293,16.214871],[114.738126,16.209022],[114.70466,16.199292],[114.703196,16.170324]]],[[[111.65535,16.558592],[111.66706,16.554381],[111.682496,16.567967],[111.68243,16.574704],[111.672117,16.576444],[111.655616,16.565385],[111.65535,16.558592]]],[[[112.721953,16.67606],[112.722951,16.661079],[112.739917,16.651933],[112.750363,16.657824],[112.75043,16.667475],[112.740849,16.676004],[112.721953,16.67606]]],[[[114.212975,16.040674],[114.239921,16.03572],[114.284965,16.035777],[114.307786,16.034144],[114.319163,16.040167],[114.319828,16.045965],[114.306455,16.057616],[114.283035,16.060487],[114.26893,16.059249],[114.233467,16.050637],[114.212975,16.040674]]],[[[114.103527,15.992653],[114.110912,15.978464],[114.134199,15.981842],[114.137925,15.99406],[114.132003,16.007347],[114.113707,16.011232],[114.106654,16.006953],[114.103527,15.992653]]],[[[113.893546,15.670508],[113.894877,15.652066],[113.901464,15.650713],[113.918031,15.656804],[113.922821,15.672369],[113.920226,15.685282],[113.900333,15.683985],[113.893546,15.670508]]],[[[113.715103,15.600455],[113.724617,15.592952],[113.747904,15.594081],[113.763074,15.601809],[113.757684,15.610891],[113.745043,15.614502],[113.724418,15.61343],[113.715103,15.600455]]],[[[114.457686,15.599496],[114.466801,15.576535],[114.482237,15.576874],[114.493149,15.587819],[114.491885,15.59346],[114.47432,15.602317],[114.457686,15.599496]]],[[[113.981704,15.419291],[114.011976,15.408789],[114.022955,15.411273],[114.024485,15.422679],[114.01191,15.430132],[113.993879,15.433576],[113.985829,15.429115],[113.981704,15.419291]]],[[[112.993211,19.472264],[113.01244,19.468675],[113.038787,19.480547],[113.048168,19.493467],[113.048434,19.506166],[113.041182,19.518642],[113.029073,19.528855],[113.008181,19.531063],[112.993611,19.525984],[112.984961,19.514502],[112.980437,19.496007],[112.985094,19.480878],[112.993211,19.472264]]],[[[113.832136,19.158421],[113.853892,19.152224],[113.873985,19.15145],[113.894145,19.157978],[113.914704,19.172141],[113.929608,19.20511],[113.920293,19.223527],[113.875915,19.236966],[113.850233,19.236192],[113.828476,19.231989],[113.806786,19.223196],[113.799534,19.199081],[113.811244,19.17109],[113.832136,19.158421]]],[[[116.694818,16.345531],[116.697945,16.315572],[116.713514,16.29674],[116.735936,16.300619],[116.747579,16.321643],[116.747712,16.360536],[116.734139,16.373012],[116.718105,16.373405],[116.706328,16.362559],[116.694818,16.345531]]],[[[114.448371,16.034088],[114.466069,16.030091],[114.485165,16.034763],[114.521625,16.056491],[114.523422,16.064371],[114.513708,16.069436],[114.481705,16.071293],[114.465404,16.06741],[114.448904,16.046697],[114.448371,16.034088]]],[[[113.860612,15.477213],[113.873786,15.461746],[113.894079,15.463948],[113.899268,15.478512],[113.890153,15.490986],[113.872655,15.491494],[113.860612,15.477213]]],[[[115.361814,13.948966],[115.382239,13.931344],[115.397609,13.925034],[115.421894,13.929866],[115.438594,13.943623],[115.438727,13.961016],[115.423424,13.977443],[115.399139,13.977556],[115.377316,13.968917],[115.361814,13.948966]]],[[[111.703853,16.209247],[111.707047,16.201879],[111.721951,16.201317],[111.721951,16.212115],[111.710241,16.213803],[111.703853,16.209247]]],[[[112.226543,16.759361],[112.235924,16.753248],[112.254021,16.751958],[112.265199,16.770184],[112.262138,16.778148],[112.224347,16.795306],[112.210841,16.795979],[112.203389,16.785774],[112.204187,16.774166],[112.226543,16.759361]]],[[[112.886757,16.783475],[112.874049,16.77282],[112.871188,16.755603],[112.877975,16.752294],[112.894808,16.758015],[112.904056,16.766988],[112.90705,16.784428],[112.893344,16.786895],[112.886757,16.783475]]],[[[111.192874,15.783151],[111.195668,15.773343],[111.21636,15.773343],[111.229534,15.786983],[111.228869,15.796114],[111.220752,15.801693],[111.196267,15.789801],[111.192874,15.783151]]],[[[112.233595,15.695996],[112.254154,15.711671],[112.259876,15.734955],[112.251759,15.743073],[112.240448,15.740931],[112.226609,15.7327],[112.203589,15.714208],[112.208778,15.695489],[112.233595,15.695996]]],[[[114.234931,15.434931],[114.250966,15.429341],[114.263075,15.44148],[114.263807,15.447238],[114.249036,15.457174],[114.243248,15.456553],[114.234931,15.434931]]],[[[111.466927,17.07641],[111.459009,17.07305],[111.468656,17.058829],[111.475376,17.059837],[111.47684,17.069691],[111.466927,17.07641]]],[[[114.92615,16.036677],[114.918166,16.053451],[114.908918,16.05514],[114.897874,16.046809],[114.895545,16.036227],[114.900668,16.020521],[114.910981,16.002055],[114.926683,16.008699],[114.92615,16.036677]]],[[[113.93859,15.835223],[113.93859,15.818487],[113.953294,15.805582],[113.973254,15.805638],[113.98004,15.826376],[113.970659,15.83928],[113.953294,15.840519],[113.93859,15.835223]]],[[[114.265337,15.550355],[114.259282,15.545276],[114.257819,15.526654],[114.269662,15.522309],[114.281837,15.534386],[114.281704,15.540141],[114.265337,15.550355]]],[[[112.646304,16.385655],[112.664535,16.380767],[112.677509,16.388353],[112.681767,16.400883],[112.679105,16.413412],[112.672119,16.421727],[112.659944,16.426671],[112.651361,16.419087],[112.644508,16.403186],[112.646304,16.385655]]],[[[112.67172,16.331536],[112.69341,16.327489],[112.701195,16.331704],[112.701993,16.343451],[112.697602,16.356771],[112.686291,16.362503],[112.677642,16.359131],[112.670789,16.344069],[112.67172,16.331536]]],[[[114.790422,15.893703],[114.790222,15.898942],[114.772191,15.901533],[114.761812,15.889084],[114.768199,15.869028],[114.787561,15.867676],[114.790422,15.893703]]],[[[114.610182,15.649303],[114.590355,15.641632],[114.581306,15.625388],[114.594147,15.615348],[114.61098,15.615291],[114.618764,15.632834],[114.610182,15.649303]]]]}}]}
    };
  },
  created() {
    this.$nextTick(() => {
      this.initCharts();
      this.getBeidouDataVisual()
      this.getBeidouThirtyDaysEventTrend()
      // this.initMapEcharts();
      // this.initCenterMap();
      this.$store.dispatch('websocketSubscribe', {'topic': 'beidouEventMsg'})
      this.$store.dispatch('wsAddCallback', {'topic': 'beidouEventMsg',  'cb': this.wsOnMessage});
      setInterval(function(){
        this.getBeidouDataVisual()
        this.getBeidouThirtyDaysEventTrend()
      }, 1000 * 60 * 30)
    })
  },
  mounted: function () {
    const that = this;
    this.$nextTick(() => {
      window.addEventListener('resize',function(){
        // 重新定义charts
        that.deviceStatisticsChart.resize();
        that.recentTwoMonthStatChart.resize();
        that.beidouThirtyDaysTrendChart.resize();
        that.mapChart.resize();
      })
    })
  },
  destroyed() {
    this.$store.dispatch('wsRemoveCallback', {'topic': 'beidouEventMsg',  'cb': _this.wsOnMessage});
  },
  methods: {
    touchFullScreen(){
      if(this.fullscreen == '全屏显示'){
        this.fullscreen = '取消全屏';
      }else{
        this.fullscreen = '全屏显示';
      }
      screenfull.toggle()
    },
    wsOnMessage(msg){
      console.log("收到回调消息：", msg)
      if(msg.topic == 'beidouEventMsg'){
        let data = msg.data;
        let eventType = data.eventType;
        if(eventType == "Ii"){
          this.alertTitle = "震动报警";
          this.alertDivClass = 'alert_img alert_img_Ii';
        }else if(eventType == "position"){
          this.alertTitle = "位移报警";
          this.alertDivClass = 'alert_img alert_img_position';
        }else if(eventType == "angel"){
          this.alertTitle = "倾斜报警";
          this.alertDivClass = 'alert_img alert_img_angel';
        }
        this.auditPlay();
        this.currentAlertData = data;
        this.alertDialogVisible = true;
      }
    },
    auditPlay(){
      let music1 = new Audio();
      if(this.noticeType == 'voice'){
        if(this.currentAlertData.eventType == 'Ii'){
          music1 = require("@/assets/audio/quake_alert.mp3");
        }else if(this.currentAlertData.eventType == 'position'){
          music1 = require("@/assets/audio/position_alert.mp3");
        }else if(this.currentAlertData.eventType == 'angle'){
          music1 = require("@/assets/audio/angle_alert.mp3");
        }
        this.$refs.audio.src = music1;
        this.$refs.audio.play();
      }else if(this.noticeType == 'notify'){
        music1 = require("@/assets/audio/warning.mp3");
        this.$refs.audio.src = music1;
        this.$refs.audio.play();
      }
    },
    noticeTypeChange(noticeType){
      this.noticeType = noticeType;
    },
    getBeidouDataVisual(){
      beidouDataVisual().then(response => {
        this.beidouClientList = response.data.beidouClientList;
        this.beidouRecentEventList = response.data.beidouEventList;
        this.beidouEventThisYearStatistics = response.data.beidouEventThisYearStatistics;
        this.initRecentTwoMonthStat();
        this.initClientMarkers();
        this.initMapEcharts();
      });
    },
    getBeidouThirtyDaysEventTrend(){
      beidouThirtyDaysEventTrend().then(response => {
        this.beidouThirtyDaysTrendData = response.data;
        this.initThirtyDaysBeidouEventTrend();
      });
    },
    initCenterMap(){
      let _this = this;
      _this.map = new BMapGL.Map("centerMap");
      _this.map.addControl(new BMapGL.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_EARTH_MAP]}));          //2D图，卫星图
      // let point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标
      //    map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
      _this.map.centerAndZoom(new BMapGL.Point(111.214147,15.789567), 17);// 初始化地图，设置中心点坐标和地图级别，全国地图
      _this.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
      // _this.map.setMapStyleV2({ styleJson: _this.baiduMapStyle() });
      // _this.map.setMapType(BMAP_EARTH_MAP);
    },
    initClientMarkers(){
      let _this = this;
      let clientList = this.beidouClientList;
      //_this.map.clearOverlays();
      _this.clientMarkerMap = {};
      _this.beidouClientStat = {
        onlineCount: 0,
        offlineCount: 0,
        dormancyCount: 0
      }
      for(let i in clientList){
        let client = clientList[i];
        // _this.addMapMarker(client);
        if(client.clientStat == 'online'){
          _this.beidouClientStat.onlineCount ++;
        }else if(client.clientStat == 'offline'){
          _this.beidouClientStat.offlineCount ++;
        }else if(client.clientStat == 'dormancy'){
          _this.beidouClientStat.dormancyCount ++;
        }
      }
      this.initDeviceStatistics();
    },
    addMapMarker(client){
      let _this = this;
      // 创建设备图标
      let pic = client.clientStat == 'online' ? _this.onlineIcon : client.clientStat == 'dormancy' ? _this.dormancyIcon : _this.offlineIcon;
      // 创建Marker标注，使用设备图标
      let longitude = client.longitude;
      let latitude = client.latitude;
      let pt = new BMapGL.Point(longitude, latitude);
      let myIcon = new BMapGL.Icon(pic, new BMapGL.Size(40, 40));
      // myIcon.setImageOffset(new BMapGL.Size(15, 20));
      let marker = new BMapGL.Marker(pt, {
        icon: myIcon
      });
      // 将标注添加到地图
      _this.map.addOverlay(marker);
      marker.addEventListener("click", function(){
        let opts = {
          width : 200,     // 信息窗口宽度
          height: 100,     // 信息窗口高度
          title : client.clientName , // 信息窗口标题
          message: client.clientName
        }
        if(_this.baiduMapInfoWindow){
          _this.baiduMapInfoWindow.close();
        }
        let text = "设备地址：" + client.address + "</br>" + "经纬度：" + client.longitude + "," + client.latitude + "</br>" + "设备编号：" + client.clientNo;
        _this.baiduMapInfoWindow = new BMapGL.InfoWindow(text, opts);  // 创建信息窗口对象
        _this.map.openInfoWindow(_this.baiduMapInfoWindow, pt);// 打开信息窗口
        _this.map.centerAndZoom(marker.getPosition(), 11);
      });
      _this.clientMarkerMap[client.clientNo] = marker;
    },
    initCharts(){
      this.deviceStatisticsChart = echarts.init(document.getElementById('aleftboxtmidd'));
      this.recentTwoMonthStatChart = echarts.init(document.getElementById('aleftboxtbott'));
      this.beidouThirtyDaysTrendChart = echarts.init(document.getElementById('arightboxbott'));
    },
    initDeviceStatistics(){
      let _this = this;
      console.log(1111111111111111, _this.beidouClientStat.onlineCount)
      _this.deviceStatisticsChartOption = {
        backgroundColor: 'rgba(1,202,217,.2)',
        legend:{
          orient: 'vertical', // 'vertical'
          x: 'left', // 'center' | 'left' | {number},
          y: '80', // 'center' | 'bottom' | {number}
          padding: 10,    // [5, 10, 15, 20]
          itemGap: 20,
          textStyle: {color: '#c3cad9'},
        },
        tooltip: {
          trigger: 'item',
          formatter: "{b} : {c} ({d}%)"
        },
        visualMap: {
          show: false,
          min: 500,
          max: 600,
          inRange: {
            //colorLightness: [0, 1]
          }
        },
        series: [{
          name: '在线状态',
          type: 'pie',
          radius: '50%',
          selectedMode: 'single',
          selectedOffset: 10,
          clockwise: true,
          center: ['50%', '50%'],
          color: ['#33ff99', '#43cadd', '#ff6464'], //'#FBFE27','rgb(11,228,96)','#FE5050'
          data: [{
              value: _this.beidouClientStat.onlineCount,
              name: '在线',
            },{
              value: _this.beidouClientStat.offlineCount,
              name: '离线',
            },
            {
              value: _this.beidouClientStat.dormancyCount,
              name: '休眠'
            }
          ].sort(function(a, b) {
            return a.value - b.value
          }),
          roseType: 'radius',
          label: {
            normal: {
              // formatter: ['{c|{b}{d}%}', '{b|{b}}'].join('\n'),
              formatter: ['{b|{b}{d}%}', '{c|{c}台}'].join('\n'),
              rich: {
                b: {
                  color: '#d9efff',
                  fontSize: 15,
                  height: 40
                },
                c: {
                  color: '#fff',
                  fontSize: 14,
                  fontWeight:'bold',
                  lineHeight: 5
                },
              },
            }
          },
          labelLine: {
            normal: {
              backgroundColor:'yellow',
              borderColor:'skyblue',
              borderWidth:10,
              lineStyle: {
                borderColor:'skyblue',
                borderWidth:10,
                backgroundColor:'yellow',
              }
            },
          }
        }]
      };
      _this.deviceStatisticsChart.setOption(_this.deviceStatisticsChartOption);
    },
    initRecentTwoMonthStat(){
      let _this = this;
      _this.recentTwoMonthStatChartOption = {
        color: ['#7ecef4'],
        backgroundColor: 'rgba(1,202,217,.2)',
        legend: {
          right: 10,
          top: 5,
          textStyle: {
            fontSize: 10,
            color: 'rgba(255,255,255,.6)'
          },
          data: [ _this.beidouEventThisYearStatistics.lastMonth, _this.beidouEventThisYearStatistics.thisMonth ]
        },
        grid: {
          left: 20,
          right: 20,
          top: 30,
          bottom: 2,
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.2)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0)'
            }
          },
          axisLabel: {
            color: "rgba(255,255,255,0)"
          },
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.5)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.1)'
            }
          },
          axisLabel: {
            color: "rgba(255,255,255,.5)"
          },
          data: ['震动', '位移', '倾斜']
        },
        series: [{
          name: _this.beidouEventThisYearStatistics.lastMonth,
          type: 'bar',
          barWidth: 15,
          label: {
            show: true,
            position: 'inside'
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                1, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(77,114,217,.7)'
                }, {
                  offset: 1,
                  color: 'rgba(117,72,159,.7)'
                }]
              )
            }
          },
          data: [ _this.beidouEventThisYearStatistics.lastMonthIi, _this.beidouEventThisYearStatistics.lastMonthPosition, _this.beidouEventThisYearStatistics.lastMonthAngle ]
        }, {
          name: _this.beidouEventThisYearStatistics.thisMonth,
          type: 'bar',
          barWidth: 15,
          label: {
            show: true,
            position: 'inside'
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                1, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(230,253,139,.7)'
                }, {
                  offset: 1,
                  color: 'rgba(41,220,205,.7)'
                }]
              )
            }
          },
          data: [ _this.beidouEventThisYearStatistics.monthIi, _this.beidouEventThisYearStatistics.monthPosition, _this.beidouEventThisYearStatistics.monthAngle ]
        }]
      };
      _this.recentTwoMonthStatChart.setOption(_this.recentTwoMonthStatChartOption);
    },
    initThirtyDaysBeidouEventTrend(){
      let _this = this;
      _this.beidouThirtyDaysTrendChartOption = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          textStyle: {
            fontSize: 10,
            color: 'rgba(255,255,255,.6)'
          },
          data: ['震动', '位移','倾斜','总报警数']
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true }
          }
        },
        grid: {
          left: 15,
          right: 15,
          top: 35,
          bottom: 10,
          containLabel: true
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: _this.beidouThirtyDaysTrendData.days,
            axisLabel: {
              color: "#FFFFFF",
              fontSize: 10,
              interval: 'auto', // x轴间距
              // rotate:40
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              show: true,
              fontSize: 10,
              color: "#FFFFFF",
            }
          },
          {
            type: 'value',
            name: '事件数',
            nameTextStyle: {
              color: '#ffffff',
            },
            splitLine:{show: false},//去除网格线
            axisLine: {
              show: false,
              lineStyle: {
                color: '#ffffff'
              }
            },
            axisTick: {show: false},
            axisLabel: {
              margin: 2,
              interval: 10,
              color: '#ffffff',
            }
          }
        ],
        series: [
          {
            name: '震动',
            type: 'bar',
            data: _this.beidouThirtyDaysTrendData.IiList,
            itemStyle: {
              normal: {
                color: '#0099ff'
              }
            }
          },
          {
            name: '位移',
            type: 'bar',
            data: _this.beidouThirtyDaysTrendData.positionList,
            itemStyle: {
              normal: {
                color: '#ff0000'
              }
            }
          },
          {
            name: '倾斜',
            type: 'bar',
            data: _this.beidouThirtyDaysTrendData.angleList,
            itemStyle: {
              normal: {
                color: '#fff200'
              }
            }
          },
          {
            name: '总报警数',
            type: 'line',
            color:['#0defe7'],  //折线条的颜色
            smooth: true,
            yAxisIndex: 1,
            itemStyle: {
              hadowBlur: 2,
            },
            data:  _this.beidouThirtyDaysTrendData.totalList
          },
        ]
      };
      _this.beidouThirtyDaysTrendChart.setOption(_this.beidouThirtyDaysTrendChartOption)
    },
    initMapEcharts(){
      let _this = this;
      _this.mapChart = echarts.init(document.getElementById('centerMap'));
      _this.mapChart.showLoading();
      echarts.registerMap('sansha', _this.geoJson);
      _this.mapChart.hideLoading();
      let geoCoordMap = {}
      let data = [];
      let clientList = this.beidouClientList;
      for(let i in clientList) {
        let client = clientList[i];
        geoCoordMap[client.clientName] = [client.longitude, client.latitude];
        data.push({ name: client.clientName, value: client.id });
      }

      let convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            });
          }
        }
        return res;
      };

      _this.mapChartOption = {
        backgroundColor: '#8acdff',
        title: {
          text: '',
          subtext: '',
          x: 'center',
          textStyle: {
            color: '#ccc'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
              return '设备信息：' + params.name + '</br>' + '经纬度：' + params.value[0] + ',' + params.value[1];
          }
        },
        geo: {
          show: true,
          map: 'sansha',
          // layoutCenter: ['990%', '-310%'], // 地图位置
          layoutCenter: ['50%', '50%'], // 地图位置
          layoutSize: '108%',
          zoom: 2, // 当前视角的缩放比例
          // zoom: 20, // 当前视角的缩放比例
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false,
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: '#757575',
              // borderWidth: 1,
              // borderColor: '#92d5cc',
              // shadowColor: '#92d5cc',
              // shadowBlur: 5,
            },
            emphasis: {
              areaColor: '#494949',
            },
          },
        },
        series: [
          {
            name: '点',
            type: 'scatter',
            coordinateSystem: 'geo',
            // symbol: _this.onlineIcon,
            // symbol: '/assets/images/visual/dataVisual/device-online.png',
            symbolSize: 18,
            label: {
              normal: {
                show: true,
                position: 'bottom',
                textStyle: {
                  color: '#fff',
                  fontSize: 15,
                },
                formatter(value) {
                  return value.data.name
                }
              }
            },
            data: convertData(data),
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            zlevel: 6
          },
        ]
      };
      _this.mapChart.setOption(this.mapChartOption);
    }
  }
};
</script>
